<template>
  <ul class="explain_list">
    <li
        v-for="(item, index) in geliStatusArr"
        :class="{ spaceb: index == 3 }"
        :key="index"
        @click="handleClick(item)"
    >
      <div
          class="check"
          :class="{ on: item.checked }"
      ></div>
      <div class="item" :class="[checkBoxFn(index), item.checked? '' : 'on']">
        <img :src="item.icon" />
        {{ item.title }}
      </div>
    </li>
  </ul>
</template>

<script>
  export default {
    name: "explainList",
    props: {
      geliStatusArr: {
        type: Array
      }
    },
    methods: {
      handleClick(item) {
        this.$emit('click', item)
      },
      checkBoxFn (index) {
        return `item${index + 1}`
      }
    }
  }
</script>

<style lang="scss" scoped>
  .explain_list {
    display: flex;
    overflow: hidden;

    .li {
      float: left;
      margin-right: 7px;
      font-size: 12px;
      text-align: center;
      color: #666;
      .spaceb {
        margin-right: 40px;
      }
      .check {
        width: 20px;
        height: 20px;
        float: left;
        margin-top: 7px;
        margin-right: 3px;
        background: url('../../../assets/images/select_icon.png') no-repeat center;
        background-size: cover;
        cursor: pointer;
        .on {
          background: url('../../../assets/images/select_icon_on.png') no-repeat
          center;
          background-size: cover;
        }
      }
    }
  }
  .explain_list > li .item {
    padding: 0 9px;
    height: 40px;
    line-height: 40px;
    float: left;
    margin-left: 10px;
    border-radius: 6px;
    font-size: 16px;

    &.on {
      border: 1px solid #fff;
    }
  }
  @mixin itemColor($fontColor, $bgColor) {
    & {
      color: $fontColor;
      border: 1px solid $fontColor;
      background: $bgColor;
    }
  }
  .explain_list > li .item1 {
    @include itemColor(#FF8B7C, #FFF1F0);
  }
  .explain_list > li .item2 {
    @include itemColor(#FFC259, #FFF2E7);
  }
  .explain_list > li .item3 {
    @include itemColor(#61C39D, #E3FBF2);
  }
  .explain_list > li .item4 {
    @include itemColor(#7662D5, #EEEDFF);
  }
  .explain_list > li .item5 {
    @include itemColor(#4e9dfd, #e6eff9);
  }
  .explain_list > li .item6 {
    @include itemColor(#8f8f8f, #ecedee);
  }
  .explain_list > li .item img {
    margin-top: -4px;
    width: 16px;
    height: 16px;
  }
</style>
